<template>
  <div class="yonghu">
    <div class="yonghu-head">
      <!-- 输入姓名，电话，邮箱 -->
      <div class="input-box">
        <el-input
          v-model="name"
          placeholder="账号/姓名/手机号码"
          clearable
        ></el-input>
      </div>
      <!-- 注册时间 -->
      <div class="date-box">
        <el-date-picker
          v-model="time"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </div>
      <!-- 搜索按钮 -->
      <div class="search-box">
        <el-button type="primary" icon="el-icon-search" @click="Search"
          >搜索</el-button
        >
      </div>
      <!-- 添加按钮 -->
      <div class="add-box">
        <el-button
          type="primary"
          @click="dialogAddFormVisible = true"
          icon="el-icon-plus"
          >添加</el-button
        >
      </div>
    </div>

    <!-- 主体 表格 -->
    <div class="table-box">
      <el-table :data="tableData" stripe style="width: 100%" border>
        <el-table-column
          prop="account"
          label="账号"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="150"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="color" label="颜色" width="150" align="center"></el-table-column> -->
        <!-- <el-table-column prop="key" label="Google密匙" width="180" align="center"></el-table-column> -->
        <el-table-column
          prop="create_date"
          label="创建时间"
          width="250"
          align="center"
        ></el-table-column>
        <el-table-column prop="account_status" label="状态" width="250" align="center">
          <template slot-scope="scope">
               <el-switch
                  v-model="scope.row.account_status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="changeStatus(scope.row)"
                ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <!--  v-if="scope.row.role_status !== 3" -->
            <el-button
              size="mini"
              type="danger"
              @click="handleEdit(scope.$index, scope.row), (yh_xg = true)"
              class="xiugai"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="resetPassword(scope.$index, scope.row)"
              class="chongzhi_mima"
              >重置密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="paging">
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 8, 10]"
          :page-size="currentSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
        >
        </el-pagination>
      </div>
    </div>



    <!--  每个页面的弹框都在最底部   -->
    <!-- 头部--添加按钮弹框 -->
    <el-dialog title="基本信息" :visible.sync="dialogAddFormVisible">
      <el-form
        :model="ruleAddForm"
        :rules="rules"
        ref="ruleAddForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="account">
          <el-input
            v-model="ruleAddForm.account"
            placeholder="确认账号"
          ></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleAddForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <div class="pass_box">
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="ruleAddForm.password"
              autocomplete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleAddForm.checkPass"
              autocomplete="off"
              placeholder="确认密码"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="primary" @click="submitAddForm('ruleAddForm')"
            >提交</el-button
          >
          <el-button @click="resetAddForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹框 -->

    <el-dialog title="基本信息" :visible.sync="yh_xg">
      <el-form
        :model="ruleEditForm"
        :rules="rules"
        ref="ruleEditForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="account">
          <el-input
            v-model="ruleEditForm.account"
            placeholder="确认账号"
          ></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleEditForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitEditForm('ruleEditForm')"
            >提交</el-button
          >
          <el-button @click="resetEditForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "Home",
  components: {},
  data() {
    // 确认密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleAddForm.checkPass !== "") {
          this.$refs.ruleAddForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleAddForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      currentPage: 1,
      currentSize: 10,
      switch:true,
      name: "",
      time: "",
      deleteId:-1,
      value: true,
      yh_xg: false,
      yh_sc: false,
      yh_cz: false,
      // 主体表格，数据
      tableData: [],
      tableTotal:50,
      // 添加按钮，数据
      dialogAddFormVisible: false,
      form: {
        account: "",
      },
      formLabelWidth: "120px",
      // 添加数据
      ruleAddForm: {
        account: "",
        create_date: "",
        name: "",
        password: "",
        sysUser: {},
        checkPass: "",
      },
      ruleEditForm: {
        account: "",
        create_date: "",
        name: "",
        password: "",
        sysUser: {},
        checkPass: "",
      },
      // 判断规则
      rules: {
        zhanghao: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 搜索按钮
    Search() {
      let date = new Date(this.time).getTime()
      
      if(date == 0) {
        date = '';
      }else{
        date = this.getTimeFormat(date);
      }
      console.log(this.name,date);
      this.getTableData(this.name,date);
    },
    // 提交按钮
    submitAddForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let date = new Date().getTime();
          date = this.getTimeFormat(date);
          this.ruleAddForm.create_date = date;
          // console.log(this.ruleAddForm)
          this.$axios({
            url:'/system/admin/sys/usermanagement/addUserInfo',
            method:'post',
            data:this.ruleAddForm
          }).then(res=>{
            if(res.data.code == 200){
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.dialogAddFormVisible = false;
              this.ruleAddForm = {
                account: "",
                create_date: "",
                name: "",
                password: "",
                sysUser: {},
                checkPass: "",
              }
            }else{
              this.$message.error('添加失败');
              this.dialogAddFormVisible = false
            }
          }).catch(err=>{
            console.log(err);
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置按钮
    resetAddForm(){
      this.ruleAddForm = {
        account: "",
        create_date: "",
        name: "",
        password: "",
        sysUser: {},
        checkPass: "",
      }
    },
    // 状态 接口
    changeStatus(row){
      console.log(row);
      this.$axios({
        url:'/system/admin/sys/usermanagement/modUserAccountStatusById',
        method:'post',
        data:{
          account_status:row.account_status ? 1 : 3,
          id:row.id,
          sysUser:{}
        }
      }).then(res=>{
        if(res.data.code == 200){
          this.$message({
            message: '状态修改成功',
            type: 'success'
          });
        }
        console.log(res);
      }).catch(err=>{
        console.log(err);
      })
    },
    // 修改提交按钮 接口
    submitEditForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            account:this.ruleEditForm.account,
            create_date:this.ruleEditForm.create_date,
            id:this.ruleEditForm.id ,
            name:this.ruleEditForm.name ,
            password:this.ruleEditForm.password ,
            // sysUser:{}
          }
          console.log(this.ruleAddForm)
          this.$axios({
            url:'/system/admin/sys/usermanagement/modUserById',
            method:'post',
            data:data
          }).then(res=>{
            if(res.data.code == 200){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.yh_xg = false;
              this.ruleEditForm = {
                account: "",
                create_date: "",
                name: "",
                password: "",
                sysUser: {},
                checkPass: "",
              }
            }else{
              this.$message.error('修改失败');
              this.dialogAddFormVisible = false
            }
          }).catch(err=>{
            this.$message.error('修改失败');
            console.log(err);
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改重置按钮
    resetEditForm(){
      this.ruleEditForm = {
        account: "",
        create_date: "",
        name: "",
        password: "",
        // sysUser: {},
        checkPass: "",
      }
    },


    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getTableData();
    },
    // 修改
    handleEdit(index,row){
      this.ruleEditForm = row;
      console.log(this.ruleEditForm);
    },
    // 用户删除接口
    handleDelete(index,row){ //要改
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(index,row.id);
          this.$axios({
            url:'/system/admin/sys/usermanagement/delUserById',
            method:'post',
            data:{
              id:row.id,
              online_status: 2
            }
          }).then(res=>{
            if(res.data.code == 200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message.error('删除失败！');
            }
            console.log(res);
          }).catch(err=>{
            this.$message.error('删除失败！');
            console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },

    // 用户表格  重置密码  接口
    resetPassword(index,row){
      console.log(index,row.id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            url:'/system/admin/sys/usermanagement/modUserPasswordById',
            method:'post',
            data:{
              id:row.id
            }
          }).then(res=>{
            if(res.data.code == 0){
              this.$message({
                type: 'success',
                message: '重置成功，默认密码“111111”!'
              });
            }
            console.log(res);
          }).catch(err=>{
            this.$message.error('重置失败')
            console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置'
          });          
        });
    },
    add0(m){return m<10?'0'+m:m },
    getTimeFormat(date){
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      return y+'-'+this.add0(m)+'-'+this.add0(d);
    },
    // 分页--用户查询---接口
    getTableData(name='',time=''){         
      this.$axios({
        url:'/system/admin/sys/usermanagement/findUser',
        method:'post',
        data:{
          account:'',
          create_date:time,
          // 查询当前页面
          currentPage:this.currentPage,
          map:{},
          name:name,
          // 每页多少条
          pageSize:this.currentSize
        }
      }).then(res=>{
        console.log(res.data.data);
        res.data.data.forEach(v => {
          v.account_status = v.account_status == 1 ? true : false;
          v.create_date = this.getTimeFormat(v.create_date);
        });
        this.tableData = res.data.data;
        this.tableTotal = res.data.count;
        console.log(this.tableTotal);
      }).catch(err=>{
        console.log(err);
      })
    }
  },
  mounted(){
    this.getTableData();
  }
};
</script>

<style scoped>
.yonghu {
  padding: 15px;
  background: #fff;
}
.yonghu-head {
  display: flex;
}
.table-box {
  margin: 15px 0;
}
.input-box,
.date-box {
  width: 220px;
  margin-right: 5px;
}
.search-box {
  margin-right: 10px;
}
/* .el-button { */
/* background: #009688; */
/* } */
.el-button--primary {
  background-color: #009688;
}
.chongzhi_mima {
  background-color: #009688;
  border-color: #409eff;
}
/* 密码，宽度 */
.pass_box {
  display: flex;
}
.checkPass,
.pass {
  width: 350px;
}
/* 修改按钮 */
.xiugai {
  background-color: #fff;
  color: black;
  border: 1px solid rgb(177, 174, 174);
}
/* .mingdan, */
/* .color { */
/* width: 300px; */
/* } */
/* 分页 */
.paging {
  margin-top: 30px;
  margin-bottom: 15px;
}
</style>
